import React from 'react';
import { Link } from 'umi';
import { LonglistCutRenderer } from '@/components/LonglistCutRenderer';

export default function IndexPage() {
  const longList = new Array(10000).fill('test Item');
  const [list, setList] = React.useState([]);
  const [list2, setList2] = React.useState([]);

  const renderList = () => {
    setList(longList);
  };
  const renderListCut = () => {
    setList2(longList);
  };

  return (
    <React.Fragment>
      <br />
      <Link to="/home">带回调的setState测试</Link>
      <br />
      <Link to="/longListRender">长列表切片组件测试</Link>
      <br />
      <Link to="/longListTest">长列表切片功能演示</Link>

      <input type="text" />
      <br />
      <button onClick={renderList}>Render List*10000</button>
      <br />
      {/* <button onClick={renderListCut}>Render List*10000</button> */}

      {/* // 普通list渲染 */}
      {list.map((item, index) => (
        <div key={index + '0'}>{item}</div>
      ))}

      {/* // 使用组件包裹的list渲染 */}
      <LonglistCutRenderer>
        {list2.map((item, index) => (
          <div key={index + '0'}>{item}</div>
        ))}
      </LonglistCutRenderer>
    </React.Fragment>
  );
}
